

<template>
    <div class='hello'>
        {{'哈哈'}}
        {{11+8}}
        {{"ok"? 'yes':'no'}}
        {{   '我喜欢前端'.split('').reverse().join('')  }}<!-- 倒序 -->
        {{msg}}
        <p v-once>{{msg}}</p><!-- v-once 表示数据只会渲染一次页面 -->
        {{hello}}<!--这样渲染的结果是<h3>你好vue</h3>,不会解析html标签 -->
        
        <!-- =============================基础指令： -->
        <!-- v-html可以解析html结构 -->
        <div v-html="hello"><!-- 这样可以解析h3标签 -->
        </div>
        <!-- v-bind  可以直接简写成冒号   <a :href='url'>{{url_name}}</a>   作用：解析属性中的对象-->
        <a v-bind:href='url'>{{url_name}}</a>
        <div v-bind:class="divClass">容器</div>
        <div :class="divClass2+'_1'">容器</div><!-- 假如想要的类名是'isActive_1' -->
        <!-- v-if----if;  v-else-if----else if;   v-else----else   -->
        <div v-if='flag'>孙悟空</div>
        <div v-else>行者孙</div>
        <!-- --------不推荐以下判断方式----------------------- -->
        <div v-if="type==='A'">A</div>
        <div v-else-if="type==='B'">B</div>
        <div v-else-if="type==='C'">C</div>
        <div v-else>NOT A/B/C</div>
        <!-- v-show -->
        <div v-show="flag">真.三国无双</div>
        <!-- 比较： v-if  VS   v-show 的区别=======v-show不管条件如何，元素总是被渲染，只是简单地基于css进行切换。有更高的初始渲染开销。so如果需要频繁地切换，使用v-show；  而v-if是惰性的，还会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建。有更高的切换开销。如果在运行时条件很少改变，就用v-if。-->
        
        <!-- ==============================列表渲染： -->
        <ul>
            <li v-for="(item,index) in names" v-bind:key="index">{{index}}-{{item.name}}-{{item.age}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'hello vue',
    
    data() {
        return {// 这样可以实现页面结构和页面数据分离
            msg: 'welcome to vue',
            hello: '<h3>你好vue</h3>',
            url_name: '淘宝',
            url: 'http://taobao.com',
            divClass: 'box',
            divClass2: 'isActive',
            flag: true,
            names:[
                {
                    name: 'tina',
                    age: 20
                },
                {
                    name: 'jane',
                    age: 22
                },
                {
                    name: 'joe',
                    age: 25
                }
               
            ]
        }
    }
}
</script>

<style lang="">
    
</style>